<template>
  <div class="dashboard">
    <section class="hero">
      <div class="hero__left">
        <div class="hero__badge">
          <el-icon><Sunny /></el-icon>
          <span>AI 赋能 · 中医智慧诊疗</span>
        </div>
        <h1>构建下一代中医智能健康体验</h1>
        <p>
          前后端协同驱动的数字化诊疗平台，聚焦问诊、影像与健康档案，打造安全、可信赖的中医智能服务闭环。
        </p>
        <div class="hero__tags">
          <el-tag v-for="tag in heroTags" :key="tag" size="small" effect="dark">{{ tag }}</el-tag>
        </div>
        <div class="hero__cta">
          <el-button type="primary" size="large" class="hero__primary" @click="router.push('/questions')">
            开启智能问答
            <el-icon class="hero__cta-icon"><ArrowRight /></el-icon>
          </el-button>
          <el-button size="large" text class="hero__secondary" @click="router.push('/history')">
            浏览健康档案
          </el-button>
        </div>
        <div class="hero__meta">
          <div class="hero__meta-item">
            <span class="meta-label">今日目标</span>
            <span class="meta-value">{{ heroGoal }}</span>
          </div>
          <span class="hero__meta-divider" />
          <div class="hero__meta-item">
            <span class="meta-label">系统状态</span>
            <span :class="['meta-value', heroStatusTone]">{{ heroStatus }}</span>
          </div>
        </div>
      </div>
      <el-card class="hero__card" shadow="never" v-loading="loading">
        <template #header>
          <div class="hero__card-header">
            <span>交付进度</span>
            <el-tag type="success" effect="dark">Day 5</el-tag>
          </div>
        </template>
        <div class="hero__card-progress">
          <el-progress
            type="dashboard"
            :percentage="heroProgress"
            :width="170"
            :stroke-width="10"
            :color="progressColors"
          />
          <div class="hero__card-progress-detail">
            <template v-if="progressBreakdown.length">
              <div v-for="item in progressBreakdown" :key="item.label" class="progress-item">
                <div class="progress-item__info">
                  <span class="progress-label">{{ item.label }}</span>
                  <span v-if="item.description" class="progress-description">{{ item.description }}</span>
                </div>
                <span class="progress-value">{{ item.value }}</span>
              </div>
            </template>
            <el-empty v-else description="暂无进度数据" :image-size="60" />
          </div>
        </div>
        <el-divider />
        <div class="hero__card-footer">
          <el-icon><Promotion /></el-icon>
          <span>下一阶段：接入真实 AI 模型与临床知识图谱，实现闭环诊疗。</span>
        </div>
      </el-card>
    </section>

    <section class="stats-grid">
      <el-card
        v-for="stat in statCards"
        :key="stat.key"
        shadow="hover"
        class="stat-card"
        :style="{ '--stat-accent': stat.accent, '--stat-color': stat.color }"
        v-loading="loading"
      >
        <div class="stat-card__icon">
          <el-icon><component :is="stat.icon" /></el-icon>
        </div>
        <div class="stat-card__content">
          <div class="stat-card__title">{{ stat.title }}</div>
          <div class="stat-card__value">
            {{ stat.value }}
            <span v-if="stat.unit" class="stat-card__unit">{{ stat.unit }}</span>
          </div>
          <div class="stat-card__meta">
            <span>{{ stat.subtitle }}</span>
            <el-tag
              size="small"
              :type="trendTagType[stat.trendType]"
              effect="plain"
              round
            >
              {{ stat.trend }}
            </el-tag>
          </div>
        </div>
      </el-card>
    </section>

    <el-row :gutter="20" class="content-grid">
      <el-col :span="16">
        <el-card class="panel-card" shadow="never" v-loading="loading">
          <template #header>
            <div class="panel-card__header">
              <div class="panel-card__title">
                <span>智能问答即时洞察</span>
                <small>实时捕捉典型案例，辅助医生快速研判</small>
              </div>
              <el-button link type="primary" @click="router.push('/questions')">
                查看全部
                <el-icon><ArrowRight /></el-icon>
              </el-button>
            </div>
          </template>
          <div v-if="insights.length" class="insight-list">
            <div v-for="(item, index) in insights" :key="item.id ?? index" class="insight-item">
              <div class="insight-item__header">
                <div class="insight-chip">{{ item.category }}</div>
                <span v-if="item.confidence !== undefined" class="insight-confidence">
                  置信度 {{ formatConfidence(item.confidence) }}
                </span>
              </div>
              <p class="insight-summary">
                {{ item.headline }}
                <span v-if="item.detail" class="insight-highlight">{{ item.detail }}</span>
              </p>
              <div class="insight-meta">
                <el-tag size="small" type="success" effect="plain">AI 推荐</el-tag>
                <span>更新时间：{{ formatUpdatedAt(item.updatedAt) }}</span>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂未生成智能问答洞察" />
        </el-card>

        <el-card class="panel-card" shadow="never" v-loading="loading">
          <template #header>
            <div class="panel-card__header">
              <div class="panel-card__title">
                <span>健康档案与影像趋势</span>
                <small>重点监测指标的多维度趋势洞察</small>
              </div>
            </div>
          </template>
          <div v-if="trendMetrics.length" class="trend-list">
            <div v-for="metric in trendMetrics" :key="metric.label" class="trend-item">
              <div class="trend-item__header">
                <span>{{ metric.label }}</span>
                <el-tag size="small" :type="metric.tagType">{{ metric.tag }}</el-tag>
              </div>
              <el-progress
                :percentage="metric.percentage"
                :stroke-width="8"
                :color="metric.color"
                :show-text="false"
              />
              <div class="trend-item__footer">
                <span>{{ metric.tip }}</span>
                <strong>{{ metric.percentage }}%</strong>
              </div>
            </div>
          </div>
          <el-empty v-else description="等待趋势指标数据" />
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="panel-card" shadow="never" v-loading="loading">
          <template #header>
            <div class="panel-card__header">
              <div class="panel-card__title">
                <span>项目路线图</span>
                <small>持续构建企业级智能诊疗平台</small>
              </div>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item
              v-for="item in roadmap"
              :key="item.title"
              :timestamp="item.day"
              :type="timelineType[item.status]"
            >
              <div class="roadmap-item" :class="`roadmap-item--${item.status}`">
                <div class="roadmap-title">{{ item.title }}</div>
                <p class="roadmap-desc">{{ item.description }}</p>
              </div>
            </el-timeline-item>
          </el-timeline>
        </el-card>

        <el-card class="panel-card quick-actions" shadow="never">
          <template #header>
            <div class="panel-card__header">
              <div class="panel-card__title">
                <span>快捷操作</span>
                <small>面向日常工作的高频任务</small>
              </div>
            </div>
          </template>
          <div class="quick-actions__list">
            <div
              v-for="action in quickActions"
              :key="action.title"
              class="quick-action"
              @click="handleAction(action)"
            >
              <div
                class="quick-action__icon"
                :style="{ color: action.color, background: action.background }"
              >
                <el-icon><component :is="action.icon" /></el-icon>
              </div>
              <div class="quick-action__body">
                <div class="quick-action__title">
                  {{ action.title }}
                  <el-tag v-if="action.tag" size="small" type="info" effect="plain">{{ action.tag }}</el-tag>
                </div>
                <p>{{ action.description }}</p>
              </div>
              <el-icon class="quick-action__arrow"><ArrowRight /></el-icon>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import type { Component } from 'vue';
import { useRouter } from 'vue-router';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import {
  ArrowRight,
  ChatDotRound,
  CollectionTag,
  DataAnalysis,
  FirstAidKit,
  MagicStick,
  Notebook,
  Promotion,
  Sunny,
  TrendCharts,
} from '@element-plus/icons-vue';
import { fetchDashboardOverview } from '@/api/dashboard';
import type {
  DashboardHero,
  DashboardInsight,
  DashboardProgressItem,
  DashboardRoadmapItem,
  DashboardStatCard,
  DashboardTrendMetric,
} from '@/types/dashboard';

interface QuickAction {
  title: string;
  description: string;
  icon: Component;
  route: string;
  color: string;
  background: string;
  tag?: string;
}

interface StatCardView extends DashboardStatCard {
  icon: Component;
}

const router = useRouter();

const loading = ref(false);
const hero = ref<DashboardHero | null>(null);
const progressBreakdown = ref<DashboardProgressItem[]>([]);
const statCards = ref<StatCardView[]>([]);
const insights = ref<DashboardInsight[]>([]);
const trendMetrics = ref<DashboardTrendMetric[]>([]);
const roadmap = ref<DashboardRoadmapItem[]>([]);

const heroTags = ['零代码运维', 'AI 问诊闭环', '多模态健康档案'];

const progressColors = [
  { color: '#34d399', percentage: 25 },
  { color: '#2563eb', percentage: 50 },
  { color: '#7c3aed', percentage: 75 },
  { color: '#db2777', percentage: 100 },
];

const statIconMap: Record<string, Component> = {
  qa: ChatDotRound,
  images: TrendCharts,
  records: FirstAidKit,
  confidence: DataAnalysis,
};

const quickActions: QuickAction[] = [
  {
    title: '快速智能问诊',
    description: '结合 AI 推理与经典方剂推荐，极速生成初诊建议。',
    icon: MagicStick,
    route: '/questions',
    color: '#2563eb',
    background: 'rgba(37, 99, 235, 0.12)',
    tag: 'AI 增强',
  },
  {
    title: '健康档案总览',
    description: '一键查看患者纵向指标与用药建议，支持导出与分享。',
    icon: Notebook,
    route: '/history',
    color: '#0ea5e9',
    background: 'rgba(14, 165, 233, 0.12)',
  },
  {
    title: '影像分析任务',
    description: '启动全流程影像识别，自动生成结构化诊断报告。',
    icon: CollectionTag,
    route: '/images',
    color: '#7c3aed',
    background: 'rgba(124, 58, 237, 0.12)',
  },
];

const trendTagType: Record<DashboardStatCard['trendType'], 'success' | 'danger' | 'info'> = {
  positive: 'success',
  negative: 'danger',
  neutral: 'info',
};

const timelineType: Record<DashboardRoadmapItem['status'], 'success' | 'primary' | 'info'> = {
  done: 'success',
  current: 'primary',
  planned: 'info',
};

const heroGoal = computed(() => hero.value?.goal ?? '数据加载中...');
const heroStatus = computed(() => hero.value?.status ?? '数据同步中');
const heroProgress = computed(() => hero.value?.progressPercentage ?? 0);
const heroStatusTone = computed(() => {
  if (!hero.value) {
    return 'meta-value--pending';
  }
  const progress = hero.value.progressPercentage;
  if (progress >= 85) {
    return 'meta-value--online';
  }
  if (progress >= 60) {
    return 'meta-value--caution';
  }
  return 'meta-value--alert';
});

const formatConfidence = (value?: number) => {
  if (value === undefined || value === null) {
    return '--';
  }
  const numeric = Number(value);
  if (Number.isNaN(numeric)) {
    return '--';
  }
  const percent = numeric > 1 ? numeric : numeric * 100;
  return `${Math.round(percent)}%`;
};

const formatUpdatedAt = (value?: string) => {
  if (!value) {
    return '刚刚';
  }
  const parsed = dayjs(value);
  if (!parsed.isValid()) {
    return value;
  }
  if (dayjs().diff(parsed, 'day') === 0) {
    return parsed.format('HH:mm');
  }
  return parsed.format('YYYY-MM-DD HH:mm');
};

const handleAction = (action: QuickAction) => {
  if (action.route) {
    router.push(action.route);
  }
};

const loadOverview = async () => {
  loading.value = true;
  try {
    const data = await fetchDashboardOverview();
    hero.value = data.hero;
    progressBreakdown.value = data.progressBreakdown ?? [];
    statCards.value = (data.stats ?? []).map((stat) => ({
      ...stat,
      icon: statIconMap[stat.key] ?? DataAnalysis,
    }));
    insights.value = data.insights ?? [];
    trendMetrics.value = data.trends ?? [];
    roadmap.value = data.roadmap ?? [];
  } catch (error) {
    console.error('[dashboard] overview fetch failed', error);
    ElMessage.error('首页数据加载失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

onMounted(loadOverview);
</script>

<style scoped lang="scss">
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-bottom: 2.5rem;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 24px;
  padding: 32px;
  border-radius: 24px;
  background: linear-gradient(135deg, #e0f2fe 0%, #ede9fe 50%, #fdf2f8 100%);
  overflow: hidden;
  box-shadow: 0 24px 45px -20px rgba(15, 23, 42, 0.35);
}

.hero::before {
  content: '';
  position: absolute;
  inset: -45% 45% 45% -45%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0) 60%);
  pointer-events: none;
}

.hero::after {
  content: '';
  position: absolute;
  inset: 40% -40% -40% 35%;
  background: radial-gradient(55% 55% at 50% 50%, rgba(192, 132, 252, 0.25) 0%, rgba(192, 132, 252, 0) 60%);
  pointer-events: none;
}

.hero__left {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  color: #0f172a;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  font-size: 0.85rem;
  font-weight: 600;
}

.hero__badge :deep(svg) {
  font-size: 1rem;
}

.hero__left h1 {
  font-size: clamp(1.9rem, 2.2vw + 1.2rem, 2.8rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}

.hero__left p {
  margin: 0;
  font-size: 1rem;
  color: rgba(15, 23, 42, 0.75);
  line-height: 1.65;
}

.hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero__primary {
  border-radius: 999px;
  padding: 0 1.8rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 18px 35px -18px rgba(37, 99, 235, 0.8);
}

.hero__primary .hero__cta-icon {
  display: inline-flex;
}

.hero__secondary {
  border-radius: 999px;
  font-weight: 600;
  color: #1f2937;
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.2rem;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  backdrop-filter: blur(12px);
}

.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.meta-label {
  font-size: 0.75rem;
  color: rgba(15, 23, 42, 0.55);
  font-weight: 500;
}

.meta-value {
  font-weight: 600;
  color: #0f172a;
}

.meta-value--online {
  color: #16a34a;
}

.meta-value--caution {
  color: #f97316;
}

.meta-value--alert {
  color: #ef4444;
}

.meta-value--pending {
  color: rgba(15, 23, 42, 0.55);
}

.hero__meta-divider {
  width: 1px;
  height: 32px;
  background: rgba(148, 163, 184, 0.4);
}

.hero__card {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.25);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.hero__card :deep(.el-card__header) {
  padding: 20px 24px 0;
  border-bottom: none;
}

.hero__card :deep(.el-card__body) {
  padding: 12px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hero__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: #111827;
}

.hero__card-progress {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero__card-progress-detail {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}

.progress-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-radius: 12px;
  background: rgba(241, 245, 249, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.22);
  font-size: 0.9rem;
  color: #1f2937;
}

.progress-item__info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.progress-label {
  font-weight: 500;
  color: rgba(15, 23, 42, 0.65);
}

.progress-description {
  font-size: 0.75rem;
  color: rgba(15, 23, 42, 0.5);
}

.progress-value {
  font-weight: 600;
  color: #0f172a;
}

.hero__card-footer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: rgba(15, 23, 42, 0.75);
  font-size: 0.9rem;
  line-height: 1.4;
}

.hero__card-footer :deep(svg) {
  color: #2563eb;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.stat-card {
  border: none;
  border-radius: 20px;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card::before {
  content: '';
  position: absolute;
  width: 160px;
  height: 160px;
  top: -70px;
  right: -80px;
  background: var(--stat-accent);
  border-radius: 50%;
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -22px rgba(15, 23, 42, 0.4);
}

.stat-card:hover::before {
  transform: scale(1.05);
}

.stat-card :deep(.el-card__body) {
  position: relative;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--stat-accent);
  color: var(--stat-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.stat-card__content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stat-card__title {
  font-size: 0.95rem;
  color: rgba(15, 23, 42, 0.7);
  font-weight: 600;
}

.stat-card__value {
  font-size: 2.1rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
}

.stat-card__unit {
  margin-left: 0.25rem;
  font-size: 1rem;
  color: rgba(15, 23, 42, 0.55);
}

.stat-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(15, 23, 42, 0.55);
  font-size: 0.85rem;
  gap: 8px;
}

.content-grid {
  margin-top: 4px;
}

.panel-card {
  border-radius: 20px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 16px 30px -26px rgba(30, 64, 175, 0.45);
}

.panel-card :deep(.el-card__header) {
  padding: 20px 24px 0;
  border-bottom: none;
}

.panel-card :deep(.el-card__body) {
  padding: 0 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.panel-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.panel-card__title {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.panel-card__title span {
  font-weight: 600;
  font-size: 1.05rem;
  color: #0f172a;
}

.panel-card__title small {
  color: rgba(15, 23, 42, 0.55);
  font-size: 0.85rem;
}

.insight-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.insight-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.2rem;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.75));
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: 0 12px 28px -24px rgba(30, 64, 175, 0.35);
}

.insight-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.insight-chip {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
  font-weight: 600;
  font-size: 0.85rem;
}

.insight-confidence {
  font-size: 0.85rem;
  color: rgba(37, 99, 235, 0.9);
  font-weight: 600;
}

.insight-summary {
  margin: 0;
  color: rgba(15, 23, 42, 0.75);
  line-height: 1.6;
  font-size: 0.95rem;
}

.insight-highlight {
  color: #0f172a;
  font-weight: 600;
}

.insight-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: rgba(15, 23, 42, 0.45);
  font-size: 0.8rem;
}

.trend-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.trend-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(203, 213, 225, 0.6);
}

.trend-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  color: #0f172a;
}

.trend-item__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(15, 23, 42, 0.6);
  font-size: 0.85rem;
}

.trend-item__footer strong {
  font-size: 1.1rem;
  color: #0f172a;
}

.quick-actions__list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(203, 213, 225, 0.55);
  cursor: pointer;
  transition: all 0.2s ease;
}

.quick-action:hover {
  transform: translateX(6px);
  box-shadow: 0 16px 28px -26px rgba(37, 99, 235, 0.45);
  background: #ffffff;
}

.quick-action__icon {
  width: 45px;
  height: 45px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.quick-action__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  color: #1f2937;
}

.quick-action__title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}

.quick-action__body p {
  margin: 0;
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.6);
}

.quick-action__arrow {
  margin-left: auto;
  color: rgba(148, 163, 184, 0.9);
  transition: transform 0.2s ease, color 0.2s ease;
}

.quick-action:hover .quick-action__arrow {
  transform: translateX(4px);
  color: #2563eb;
}

.roadmap-item {
  padding: 0.85rem 1rem;
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid rgba(203, 213, 225, 0.6);
}

.roadmap-item--done {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.38);
}

.roadmap-item--current {
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.38);
  box-shadow: 0 18px 36px -25px rgba(37, 99, 235, 0.45);
}

.roadmap-item--planned {
  background: rgba(148, 163, 184, 0.12);
  border-color: rgba(148, 163, 184, 0.3);
}

.roadmap-item:hover {
  transform: translateX(6px);
}

.roadmap-title {
  font-weight: 600;
  color: #0f172a;
}

.roadmap-desc {
  margin: 6px 0 0;
  color: rgba(15, 23, 42, 0.6);
  font-size: 0.85rem;
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 28px;
  }

  .hero__card {
    max-width: 420px;
  }
}

@media (max-width: 992px) {
  .hero__cta {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .hero__meta-divider {
    display: none;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard {
    gap: 1.25rem;
  }

  .hero {
    padding: 24px;
  }

  .hero__card {
    width: 100%;
  }

  .panel-card :deep(.el-card__body) {
    padding: 0 18px 20px;
  }

  .quick-action {
    align-items: flex-start;
  }
}
</style>

